<template>
  <div class="charts">
    <p class="c-title">智能设备运营驾驶舱</p>
    <div class="charts-all">
      <el-row :gutter="15">
        <el-col :span="6">
          <div class="box-a">
            <div class="box1">
              <div class="charts-title"><span>>></span>预防性维修占比（PM）</div>
              <div class="PM"><e-charts class="charts1" autoresize :option="option" /></div>
            </div>
            <div class="box2">
              <div class="chats-a">
                <div class="charts-title"><span>>></span>设备故障停线时间及设备维护费用</div>
                <div class="chart-a"><e-charts class="charts2" autoresize :option="option1" /></div>
              </div>
              <div class="chats-a">
                <div class="charts-title"><span>>></span>设备故障停线次数</div>
                <div class="chart-a"><e-charts class="charts2" autoresize :option="option2" /></div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box-b">
            <div class="box3">
              <div class="m-title"><h1>设备年度总维修费用 <span>2</span><span>0</span><span>2</span><span>3</span><b>万元</b></h1></div>
              <div class="chart-a"><e-charts style="height: 33vh;width: 98%" autoresize :option="option3" /></div>
            </div>
            <div class="box4">
              <div class="charts-title"><span>>></span>预防计划完成率</div>
              <div class="chart-a"><e-charts style="height: 30vh;width: 100%" autoresize :option="option4" /></div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="box-c">
            <div class="box5">
              <div class="chats-b">
                <div class="charts-title"><span>>></span>MTBF</div>
                <div class="chart-a"><e-charts style="height: 20vh;width:95%;margin-top: -2%" autoresize :option="option5" /></div>
              </div>
              <div class="chats-b">
                <div class="charts-title"><span>>></span>MTTR</div>
                <div class="chart-a"><e-charts style="height: 20vh;width:95%;margin-top: -2%" autoresize :option="option6" /></div>
              </div>
            </div>
            <div class="box6">
              <div class="charts-title"><span>>></span>设备可动率</div>
              <div class="chart-a"><e-charts style="height: 24vh;width: 98%" autoresize :option="option7" /></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
const BorderWidth = '6'
const placeHolderStyle = {
  normal: {
    label: {
      show: false,
      position: 'center'
    },
    labelLine: {
      show: false
    },
    color: '#0e2f94',
    borderColor: 'rgba(0,0,0,0)'
    // borderWidth: 50
  },
  emphasis: {
    color: '#dedede',
    borderColor: '#dedede',
    borderWidth: 0
  }
}
export default {
  data() {
    return {
      fullscreenFlag: false
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    option() {
      return {
        color: ['#ff0101', '#ff7e00', '#e5cf10', '#23c668', '#02a1e5'],
        legend: {
          show: true,
          orient: 'vertical',
          right: 'right',
          top: 'middle',
          data: ['冲压', '涂装', '车身', '总装', '质量'],
          itemHeight: 5,
          right: 1,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        series: [{
          name: '冲压',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [78, 79],
          itemStyle: {
            normal: {
              label: {
                show: false,
                position: 'outside'
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#ff0101',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 7,
            name: '70%'
          },
          {
            value: 3,
            name: '',
            itemStyle: placeHolderStyle
          }
          ]
        }, {
          name: '涂装',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [68, 69],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#ff7e00',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 6,
            name: '60%'
          },
          {
            value: 4,
            name: '',
            itemStyle: placeHolderStyle
          }
          ]
        }, {
          name: '车身',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [58, 59],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#e5cf10',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 5,
            name: '40%'
          },
          {
            value: 5,
            name: '',
            itemStyle: placeHolderStyle
          }
          ]
        }, {
          name: '总装',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [48, 49],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#23c668',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 5,
            name: '30%'
          },
          {
            value: 5,
            name: '',
            itemStyle: placeHolderStyle
          }
          ]
        }, {
          name: '质量',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [38, 39],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#02a1e5',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 4,
            name: '30%'
          },
          {
            value: 6,
            name: '',
            itemStyle: placeHolderStyle
          }
          ]
        }]
      }
    },
    option1() {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          itemHeight: 5,
          top: 30,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            min: 0,
            max: 80,
            position: 'right',
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            }
          },
          {
            type: 'value',
            min: 0,
            max: 80,
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            position: 'left',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            }
          }
        ],
        yAxis: [
          {
            nameTextStyle: { // 关键代码
              padding: [-50, 0, 10, 0],
              color: '#00deff'
            },
            type: 'category',
            data: ['质量', '生管', '动力', '冲压', '总装', '车身', '涂装'],
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          },
          {
            type: 'category',
            nameTextStyle: { // 关键代码
              color: '#00deff'
            },
            position: 'right',
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            name: '停线时间',
            type: 'bar',
            data: [50, 60, 30, 50, 110, 40, 10],
            barWidth: '20%',
            itemStyle: {
              color: '#53f1f2', // 柱条颜色
              borderType: 'dashed' // 柱条描边类型，默认值'solid'；可取值'solid', 'dashed', 'dotted'
            }
          },
          {
            name: '维护费用',
            type: 'bar',
            data: [66, 20, 60, 50, 61, 102, 50],
            barWidth: '20%',
            itemStyle: {
              color: '#faa234', // 柱条颜色
              borderType: 'dashed' // 柱条描边类型，默认值'solid'；可取值'solid', 'dashed', 'dotted'
            }
          }
        ]
      }
    },
    option2() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['车身', '总装', '涂装', '冲压', '动力', '生管'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位（次）',
            min: 0,
            max: 250,
            nameTextStyle: { // 关键代码
              padding: [-50, 0, 10, 500],
              color: '#00deff'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [
              {
                value: 99,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#047fdd' },
                    { offset: 0.5, color: '#264dd6' },
                    { offset: 1, color: '#3c2bd1' }
                  ])
                }
              },
              {
                value: 200,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#fdd401' },
                    { offset: 0.5, color: '#fdb602' },
                    { offset: 1, color: '#fc9701' }
                  ])
                }
              },
              {
                value: 102,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#64dee3' },
                    { offset: 0.5, color: '#3ab5e1' },
                    { offset: 1, color: '#0685de' }
                  ])
                }
              },
              {
                value: 66,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#ff971a' },
                    { offset: 0.5, color: '#fe661b' },
                    { offset: 1, color: '#fe441b' }
                  ])
                }
              },
              {
                value: 33,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#affdcf' },
                    { offset: 0.5, color: '#54d98c' },
                    { offset: 1, color: '#2ac96b' }
                  ])
                }
              },
              {
                value: 12,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#047fdd' },
                    { offset: 0.5, color: '#264dd6' },
                    { offset: 1, color: '#3c2bd1' }
                  ])
                }
              }
            ]
          }
        ]
      }
    },
    option3() {
      return {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器
            type: 'cross' // 十字准星指示器
            // label:{
            //     backgroundColor:'#ccc'
            // }
          }
        },
        legend: {
          data: ['年度维修费用', '每月计划维修费用', '每周实际花费', '每月实际花费'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['冲压车间', '焊装车间', '涂装车间', '总装车间', '动力车间', '生产管理部', '质量部']
        },
        yAxis: {
          name: '（万元）',
          min: 0,
          max: 1000,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        series: [
          {
            name: '年度维修费用',
            type: 'line',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#036eb6',
                lineStyle: {
                  color: '#036eb6',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#036eb6', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [200, 100, 600, 500, 490, 800, 210]
          },
          {
            name: '每月计划维修费用',
            type: 'line',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#f2d402',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#f2d402', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [100, 200, 300, 400, 500, 600, 230]
          },
          {
            name: '每周实际花费',
            type: 'line',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#24c467',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#24c467', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [0, 232, 201, 500, 190, 500, 410]
          },
          {
            name: '每月实际花费',
            type: 'line',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#fe0000',
                lineStyle: {
                  color: '#fe0000',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#fe0000', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [20, 332, 500, 105, 400, 300, 200]
          }
        ]
      }
    },
    option4() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            ['product', '待办', '完成', '超时', '申请停产', '停产审核'],
            ['车身', 43.3, 85.8, 93.7, 55.5, 66.8],
            ['总装', 43.3, 85.8, 93.7, 55.5, 66.8],
            ['涂装', 43.3, 85.8, 93.7, 55.5, 66.8],
            ['冲压', 43.3, 85.8, 93.7, 55.5, 66.8],
            ['动力', 43.3, 85.8, 93.7, 55.5, 66.8],
            ['生管', 43.3, 85.8, 93.7, 55.5, 66.8],
            ['质量', 43.3, 85.8, 93.7, 55.5, 66.8]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            },
            formatter: '{value} %'
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#64dee3' },
                { offset: 0.5, color: '#3ab5e1' },
                { offset: 1, color: '#0685de' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option5() {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            show: false
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['一月', '四月', '八月', '十二月']
        },
        yAxis: {
          type: 'value',
          name: '分钟',
          min: 0,
          max: 150,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        series: [
          {
            name: '工厂',
            type: 'line',
            stack: '销售量',
            data: [10, 16, 5, 64, 35, 45, 12]
          },
          {
            name: '指标',
            type: 'line',
            stack: '销售量',
            data: [120, 12, 22, 31, 41, 12, 66]
          }
        ]
      }
    },
    option6() {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['一月', '四月', '八月', '十二月']
        },
        yAxis: {
          type: 'value',
          name: '分钟',
          min: 0,
          max: 150,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        series: [
          {
            name: '工厂',
            type: 'line',
            data: [10, 20, 59, 66, 48, 32, 110]
          },
          {
            name: '指标',
            type: 'line',
            data: [120, 55, 56, 48, 12, 11, 66]
          }
        ]
      }
    },
    option7() {
      return {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器
            type: 'cross' // 十字准星指示器
            // label:{
            //     backgroundColor:'#ccc'
            // }
          }
        },
        legend: {
          data: ['指标', '工厂', '平均'],
          itemHeight: 1,
          itemWidth: 14,
          icon: 'rect',
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['一月', '三月', '五月', '七月', '九月', '十一月']
        },
        yAxis: {
          min: 0,
          max: 100,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            },
            formatter: '{value} %'
          }
        },
        series: [
          {
            name: '指标',
            type: 'line',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#036eb6',
                lineStyle: {
                  color: '#036eb6',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#036eb6', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [50, 10, 60, 30, 30, 40, 60]
          },
          {
            name: '工厂',
            type: 'line',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#f2d402',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#f2d402', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [12, 33, 44, 11, 13, 65, 80]
          },
          {
            name: '平均',
            type: 'line',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#fe441b',
                lineStyle: {
                  color: '#fe441b',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#fe441b', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [0, 31, 41, 89, 11, 65, 21]
          }
        ]
      }
    }
  },
  created() {

  },
  methods: {

  }
}
</script>
<style scoped>
  .charts{
    width: 100%;
    height: calc(100vh - 30px);
    margin-top: -10px;
    background-image: url("../../assets/charts-bg.jpg");
    background-size: 100% 100%;
    background-color: #0c1330;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  .c-title{
    font-size: 28px;
    color: #00deff;
    text-align: center;
  }
  .box1{
    height: 28vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box2{
    height: 52vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .box3{
    height: 50vh;
    background-image: url("../../assets/box-m.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box4{
    height: 30vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box5{
    height: 50vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between ;
  }
  .box6{
    height: 30vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .charts-title{
    color: #21b7b5;
    margin-top: 8px;
    margin-left: 8px;
  }
  .PM{
    width: 100%;
    height: 100%;
  }
  .charts1{
    margin-left: -10%;
    margin-top: -4%;
  }
  .charts2{
    height: 22vh;
    width: 98%;
  }
  .charts-title span{
    background-image: url("../../assets/box1.png");
    width: 100px;
    height: 30vh;
    background-size: 100% 100%;
    background-color: #0c1330;
    background-repeat: no-repeat;
  }
  .charts-all{
    height: 100%;
    padding: 0 1vw 0;
    margin-top: -20px;
  }
  .box-a{
    height: 82vh;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
  }
  .box-b{
    height: 82vh;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
  }
  .box-c{
    height: 82vh;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
  }
  .m-title h1{
    color: #fff;
    text-align: center;
    font-size: 24px;
    padding-top: 40px;
  }
  .m-title span{
    display: inline-block;
    padding: 4px 8px ;
    background-image: linear-gradient(#0ca1bd, #0ccfb1);
    margin-right: 8px;
  }
  .m-title b{
    font-size: 18px;
    font-weight: normal;
  }
  .chart-a{
    width: 100%;
    height: 100%;
  }
  .charts img {
    position: fixed;
    left: 18px;
    top:20px
  }
</style>
<style>
  .handle-button{
    display: block;
  }
</style>
